<template>
  <j-modal :title="title" :width="1200" :visible="visible" @ok="handleCancel" @cancel="handleCancel" cancelText="关闭">
    <a-card :bordered="false">
    <!-- 查询区域 -->
    <div class="table-page-search-wrapper">
      <a-form layout="inline" @keyup.enter.native="searchQuery">
        <a-row :gutter="24">
          <a-col :xl="6" :lg="7" :md="8" :sm="24">
            <a-form-item label="手机号">
              <a-input placeholder="" v-model="queryParam.mobile" allowClear></a-input>
            </a-form-item>
          </a-col>
          <a-col :xl="6" :lg="7" :md="8" :sm="24">
            <a-form-item label="领取状态">
              <a-select v-model="queryParam.bizStatus" allowClear>
                <a-select-option value="1">成功</a-select-option>
                <a-select-option value="2">失败</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :xl="4" :lg="7" :md="8" :sm="24">
            <span style="float: left; overflow: hidden" class="table-page-search-submitButtons">
              <a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
            </span>
          </a-col>
        </a-row>
      </a-form>
    </div>

    <!-- table区域-begin -->
    <div>
      <a-table ref="table" size="small" bordered rowKey="id" :columns="columns" :dataSource="dataSource"
        :pagination="ipagination" :loading="loading" class="j-table-force-nowrap" @change="handleTableChange">
        <span slot="bizStatus" slot-scope="text, record">
          <a-tag color="blue" v-if="text == 1">成功</a-tag>
          <a-tag color="yellow" v-if="text == 2">失败</a-tag>
          <a-tag v-if="text == 0">发放中</a-tag>
        </span>
      </a-table>
    </div>
    <!-- table区域-end -->
  </a-card>
  </j-modal>
</template>

<script>
import '@/assets/less/TableExpand.less'
import { JeecgListMixin } from '@/mixins/JeecgListMixin'

export default {
  name: 'PosMarketSenceTaskList',
  mixins: [JeecgListMixin],
  components: {},
  data() {
    return {
      title: '领取明细',
      disableMixinCreated: true,
      visible: false,
      // 表头
      columns: [
        {
          title: '手机号',
          align: 'center',
          dataIndex: 'mobile',
        },
        {
          title: '领取内容',
          align: 'center',
          dataIndex: 'taskType',
          customRender:(text,record)=>{
            if(text == 'COUPON'){
              return '优惠券(' + record.relatedCouponName + ')'
            }else{
              return '积分'
            }
          }
        },
        {
          title: '数量',
          align: 'center',
          dataIndex: 'num',
        },
        {
          title: '领取状态',
          align: 'center',
          dataIndex: 'bizStatus',
          scopedSlots: { customRender: 'bizStatus' },

        },
        {
          title: '领取时间',
          align: 'center',
          dataIndex: 'distTime',

        },
      ],
      url: {
        list: '/marketing/sence/posMarketSenceTask/list',
      },
    }
  },
  computed: {},
  methods: {
    view(record,senceType) {
      let senceId = record.id
      this.queryParam.senceId = senceId
      this.assembleColumns(senceType)

      this.loadData(1)
    },
    assembleColumns(senceType){
      if(senceType){
        // const newColumns = this.cloneColumns.filter(
        //   (item) => item.dataIndex !== 'special' && item.dataIndex !== 'reduce'
        // )
        // this.columns = newColumns
      }
    },
    close() {
      this.visible = false
    },
    handleCancel() {
      this.close()
    },
  },
}
</script>
<style scoped>
@import '~@assets/less/common.less';
</style>